<template>
    <el-row>
      <el-col :span="1" :offset="1">
        <!-- 当选中该多选框 list组件当中的所有多选框都选中，不是选中状态时，所有多选框都不选中 
        最终操作的还是todolist todo flag   最终还是需要去app当中操作
        初始值还是需要设计成为计算属性
        -->
        <el-checkbox v-model="allSelect"></el-checkbox>
      </el-col>
      <el-col :span="6">
        <span>选中{{ selectNum }}条</span>
        <span>/</span>
        <span>共有{{ all }}条</span>
      </el-col>
      <el-col :span="4" :offset="8">
        <el-button type="danger" @click="delSelectAll">删除选中元素</el-button>
      </el-col>
    </el-row>
  </template>
  
  <script lang="ts">
  import { computed, defineComponent } from "vue";
  
  export default defineComponent({
    props: [
      "all",
      "selectNum",
      "allSelectIsOrNo",
      "allSelectTodoList",
      "selectAllDel",
    ],
    setup(props) {
      const allSelect = computed({
        get() {
          // 直接return true false
          // 是true或者false取决于 todolist todo flag  所有的flag都为true  true  如果所有的flag有一个不为true 就false
          return props.allSelectIsOrNo;
        },
        set(value) {
          // 拦截之后 如果为true 都为true 如果为false都为false
          console.log(value);
          props.allSelectTodoList(value);
        },
      });
      // 删除选中的所有元素
      const delSelectAll = () => {
        // 操作应该在app
        //
        console.log(11);
        props.selectAllDel();
      };
  
      return {
        allSelect,
        delSelectAll,
      };
    },
  });
  </script>
  
  <style scoped>
  </style>